@charset "utf-8";
@mixin tuding($layout:'h',$rowo:auto,$n1:200px,$n2:200px,$space:10px,$incInner:false,$v1:200px,$v2:200px){
	@if($layout=='h'){
		@include tudingComment($layout,$rowo,$n1,$n2,$incInner,$v1,$v2);
		@include tudingPrepare($rowo);
		@include tudingH($rowo,$n1,$n2,$space);
		//@include tudingInnerH($incInner,$v1,$v2);
		@include tudingWidth('.rowo');
		@include tudingX();
	}@else if($layout=='fl'){
		@include tudingComment($layout,$rowo,$n1,$n2,$incInner,$v1,$v2);
		@include tudingPrepare($rowo);
		@include tudingFl($rowo,$n1,$n2,$space);
		//@include tudingInnerFl($incInner,$v1,$v2);
		@include tudingWidth('.rowo');
		@include tudingX();
	}@else if($layout=='ft7'){
		@include tudingComment($layout,$rowo,$n1,$n2,$incInner,$v1,$v2);
		@include tudingPrepare($rowo);
		@include tudingFt7($rowo,$n1,$n2,$space);
		//@include tudingInnerFt7($incInner,$v1,$v2);
		@include tudingWidth('.rowo');
		@include tudingX();
	}@else{
		/* Warning!!! Parameter error!!! */
	}
}



@mixin tudingComment($layout,$rowo,$n1,$n2,$incInner,$v1,$v2){
	$innerInfo:'';
	$layoutName:'';
	@if($incInner==true){
		$innerInfo:'incInner=#{$incInner}; v1=#{$v1}; v2=#{$v2}; ';
	}
	@if($layout=='h'){
		$layoutName:'Hybrid Mode';
	}@else if($layout=='fl'){
		$layoutName:'Fixed L Mode';
	}@else if($layout=='ft7'){
		$layoutName:'Fixed T&7 Mode';
	}@else{
		$layoutName:'Undefined layout!!!';
	}
	/* [#{$layoutName}] - Tuding Layout System v2.0 - copyright(c)bubujie.net */
	/* wrapping=#{$rowo}; n1=#{$n1}; n2=#{$n2}; #{$innerInfo}*/
}



@mixin tudingPrepare($rowo:auto){
	//[Tuding Prepare]
	/* Body */
	body { height:100%; margin:0; padding:0; }
	/* bHead & bBody & bFoot & Wrapping & Filling & Wrap & Fill */
	#bhead, #bbody, #bfoot, .rowo, .fillo, .rowi, .filli { position:relative; clear:both; *zoom:1; }
	#bhead:after, #bbody:after, #bfoot:after, .rowo:after, .fillo:after, .rowi:after, .filli:after { content:""; display:block; clear:both; }
	/* Wrapping width */
	.rowo { width:$rowo; margin-left:auto; margin-right:auto; }
	/* Wrapping align */
	.lefting .rowo { margin-left:0; }
	.righting .rowo { margin-right:0; }
	/* Ming & Ning & Wing & Ving & Ding */
	.ming, .n1, .n2, .wing, .v1, .v2, .ding { position:relative; *zoom:1; }
	.ming:after, .n1:after, .n2:after, .wing:after, .v1:after, .v2:after, .ding:after { content:""; display:block; clear:both; }
	/* bHead li & bFoot li */
	#bhead ul, #bfoot ul { position:relative; }
	#bhead li, #bfoot li { position:relative; float:left; list-style:none; }
}



@mixin tudingH($rowo:auto,$n1:200px,$n2:200px,$space:10px){
	//[Hybrid Mode]
	/* Hybrid MN */
	.mn { padding-right:$n1 +$space; }
	.mn .ming { float:left; width:100%; }
	.mn .n1, .mn .n2 { float:right; width:$n1; margin-left:-$n1; left:$n1 +$space; }
	/* Hybrid NM */
	.nm { padding-left:$n1 +$space; }
	.nm .ming { float:right; width:100%; }
	.nm .n1, .nm .n2 { float:left; width:$n1; margin-right:-$n1; left:-$n1 -$space; }
	/* Hybrid MNN */
	.mnn { padding-right:$n1 +$n2 +$space*2; }
	.mnn .ming { float:left; width:100%; }
	.mnn .n1 { float:right; width:$n1; margin-left:-$n1; left:$n1 +$space; }
	.mnn .n2 { float:right; width:$n2; margin-left:-$n2; left:$n1 +$n2 +$space*2; }
	/* Hybrid NMN */
	.nmn { padding-left:$n1 +$space; padding-right:$n2 +$space; }
	.nmn .ming { float:left; width:100%; margin-right:-100%; }//Important::margin-right:-100%;
	.nmn .n1 { float:left; width:$n1; margin-right:-$n1; left:-$n1 -$space; }
	.nmn .n2 { float:right; width:$n2; margin-left:-$n2; left:$n2 +$space; }
	/* Hybrid NNM */
	.nnm { padding-left:$n1 +$n2 +$space*2; }
	.nnm .ming { float:right; width:100%; }
	.nnm .n1 { float:left; width:$n1; margin-right:-$n1; left:-$n1 -$n2 -$space*2; }
	.nnm .n2 { float:left; width:$n2; margin-right:-$n2; left:-$n2 -$space; }
}
@mixin tudingH2cols($rowo:auto,$n1:200px,$n2:200px,$space:10px,$cols:2){
	/* [Hybrid Mode] [2 Columns] */
	.rowo { width:$rowo; }
	@if($cols==-1){
		/* Hybrid 2cols MN -1 */
		.mn { padding-right:0; }
		.mn .ming { float:none; width:auto; }
		.mn .n1, .mn .n2 { float:none; width:auto; margin-left:0; left:0; }
		/* Hybrid 2cols NM -1 */
		.nm { padding-left:0; }
		.nm .ming { float:none; width:auto; }
		.nm .n1, .nm .n2 { float:none; width:auto; margin-right:0; left:0; }	
	}@else{
		/* Hybrid 2cols MN */
		.mn { padding-right:$n1 +$space; }
		.mn .n1, .mn .n2 { width:$n1; margin-left:-$n1; left:$n1 +$space; }
		/* Hybrid 2cols NM */
		.nm { padding-left:$n1 +$space; }
		.nm .n1, .nm .n2 { width:$n1; margin-right:-$n1; left:-$n1 -$space; }	
	}
	/* Hybrid 2cols MNN */
	.mnn { padding-right:$n1 +$space; }
	.mnn .ming{}
	.mnn .n1 { width:$n1; margin-left:-$n1; left:$n1 +$space; }
	.mnn .n2 { float:left; width:100%; margin-left:0; left:0; }
	/* Hybrid 2cols NMN */
	.nmn { padding-left:$n1 +$space; padding-right:0; }
	.nmn .ming { float:right; margin-right:0; }//Extend::<-margin-right:-100%;
	.nmn .n1 { width:$n1; margin-right:-$n1; left:-$n1 -$space; }
	.nmn .n2 { width:100%; margin-left:0; left:0; }
	/* Hybrid 2cols NNM */
	.nnm { padding-left:$n1 +$space; }
	.nnm .ming{}
	.nnm .n1 { width:$n1; margin-right:-$n1; left:-$n1 -$space; }//Extend::left:-$n1 -$n2 -$space*2;
	.nnm .n2 { float:right; width:100%; margin-right:0; left:0; }
}
@mixin tudingHSet($selector:'',$rowo:auto,$n1:200px,$n2:200px,$space:10px){
	/* [Hybrid Mode] [Reset] */
	#{$selector} .rowo { width:$rowo; }
	/* Hybrid Reset MN */
	#{$selector} .mn { padding-right:$n1 +$space; }
	#{$selector} .mn .n1, #{$selector} .mn .n2 { width:$n1; margin-left:-$n1; left:$n1 +$space; }
	/* Hybrid Reset NM */
	#{$selector} .nm { padding-left:$n1 +$space; }
	#{$selector} .nm .n1, #{$selector} .nm .n2 { width:$n1; margin-right:-$n1; left:-$n1 -$space; }
	/* Hybrid Reset MNN */
	#{$selector} .mnn { padding-right:$n1 +$n2 +$space*2; }
	#{$selector} .mnn .n1 { width:$n1; margin-left:-$n1; left:$n1 +$space; }
	#{$selector} .mnn .n2 { width:$n2; margin-left:-$n2; left:$n1 +$n2 +$space*2; }
	/* Hybrid Reset NMN */
	#{$selector} .nmn { padding-left:$n1 +$space; padding-right:$n2 +$space; }
	#{$selector} .nmn .n1 { width:$n1; margin-right:-$n1; left:-$n1 -$space; }
	#{$selector} .nmn .n2 { width:$n2; margin-left:-$n2; left:$n2 +$space; }
	/* Hybrid Reset NNM */
	#{$selector} .nnm { padding-left:$n1 +$n2 +$space*2; }
	#{$selector} .nnm .n1 { width:$n1; margin-right:-$n1; left:-$n1 -$n2 -$space*2; }
	#{$selector} .nnm .n2 { width:$n2; margin-right:-$n2; left:-$n2 -$space; }
}



@mixin tudingFl($rowo:960px,$n1:200px,$n2:200px,$space:10px){
	//[Fixed L Mode]
	/* Fixed MN */
	.mn .ming { width:$rowo -$n1 -$space; float:left; }
	.mn .n1, .mn .n2 { width:$n1; float:right; }
	/* Fixed NM */
	.nm .ming { width:$rowo -$n1 -$space; float:right; }
	.nm .n1, .nm .n2 { width:$n1; float:left; }
	/* Fixed L MNN */
	.mnn .ming { width:$rowo -$n1 -$n2 -$space*2; float:left; }
	.mnn .n1 { width:$n1; float:left; margin-left:$space }
	.mnn .n2 { width:$n2; float:right; }
	/* Fixed L NMN */
	.nmn .ming { width:$rowo -$n1 -$n2 -$space*2; float:left; margin-right:-100%; left:$n1 +$space; }
	.nmn .n1 { width:$n1; float:left; }
	.nmn .n2 { width:$n2; float:right; }
	/* Fixed NNM */
	.nnm .ming { width:$rowo -$n1 -$n2 -$space*2; float:right; }
	.nnm .n1 { width:$n1; float:left; margin-right:$space; }
	.nnm .n2 { width:$n2; float:left; }
}
@mixin tudingFl2cols($rowo:960px,$n1:200px,$n2:200px,$space:10px,$cols:2){
	/* [Fixed L Mode] [2 Columns] */
	.rowo { width:$rowo; }
	@if($cols==-1){
		/* Fixed 2cols MN -1 */
		.mn .ming { width:auto; float:none; }
		.mn .n1, .mn .n2 { width:auto; float:none; }
		/* Fixed 2cols NM -1 */
		.nm .ming { width:auto; float:none; }
		.nm .n1, .nm .n2 { width:auto; float:none; }	
	}@else{
		/* Fixed 2cols MN */
		.mn .ming { width:$rowo -$n1 -$space; }
		.mn .n1, .mn .n2 { width:$n1; }
		/* Fixed 2cols NM */
		.nm .ming { width:$rowo -$n1 -$space; }
		.nm .n1, .nm .n2 { width:$n1; }	
	}
	/* Fixed L 2cols MNN */
	.mnn .ming { width:$rowo -$n1 -$space; }
	.mnn .n1 { width:$n1; float:right; margin-left:$space; }
	.mnn .n2 { width:$rowo -$n1 -$space; float:left; }
	/* Fixed L 2cols NMN */
	.nmn .ming { width:$rowo -$n1 -$space; float:right; margin-right:0; left:0; }//Extend::margin-right:-100%; left:$n1 +$space;
	.nmn .n1 { width:$n1; }
	.nmn .n2 { width:$rowo -$n1 -$space; }
	/* Fixed 2cols NNM */
	.nnm .ming { width:$rowo -$n1 -$space; }
	.nnm .n1 { width:$n1; margin-right:$space; }
	.nnm .n2 { width:$rowo -$n1 -$space; float:right; }
}
@mixin tudingFlSet($selector:'',$rowo:960px,$n1:200px,$n2:200px,$space:10px){
	/* [Fixed L Mode] [Reset] */
	#{$selector} .rowo { width:$rowo; }
	/* Fixed Reset MN */
	#{$selector} .mn .ming { width:$rowo -$n1 -$space; }
	#{$selector} .mn .n1, #{$selector} .mn .n2 { width:$n1; }
	/* Fixed Reset NM */
	#{$selector} .nm .ming { width:$rowo -$n1 -$space; }
	#{$selector} .nm .n1, #{$selector} .nm .n2 { width:$n1; }
	/* Fixed L Reset MNN */
	#{$selector} .mnn .ming { width:$rowo -$n1 -$n2 -$space*2; }
	#{$selector} .mnn .n1 { width:$n1; margin-left:$space; }
	#{$selector} .mnn .n2 { width:$n2; }
	/* Fixed L Reset NMN */
	#{$selector} .nmn .ming { width:$rowo -$n1 -$n2 -$space*2; left:$n1 +$space; }
	#{$selector} .nmn .n1 { width:$n1; }
	#{$selector} .nmn .n2 { width:$n2; }
	/* Fixed Reset NNM */
	#{$selector} .nnm .ming { width:$rowo -$n1 -$n2 -$space*2; }
	#{$selector} .nnm .n1 { width:$n1; margin-right:$space; }
	#{$selector} .nnm .n2 { width:$n2; }
}



@mixin tudingFt7($rowo:960px,$n1:200px,$n2:200px,$space:10px){
	//[Fixed T&7 Mode]
	/* Fixed MN */
	.mn .n1, .mn .n2 { width:$n1; float:right; }
	.mn .ming { width:$rowo -$n1 -$space; float:left; }
	/* Fixed NM */
	.nm .n1, .nm .n2 { width:$n1; float:left; }
	.nm .ming { width:$rowo -$n1 -$space; float:right; }
	/* Fixed T&7 MNN */
	.mnn .n1 { width:$n1; float:left; margin-right:-100%; left:$rowo -$n1 -$n2 -$space; }//!!!$space*1
	.mnn .ming { width:$rowo -$n1 -$n2 -$space*2; float:left; }
	.mnn .n2 { width:$n2; float:right; }
	/* Fixed T&7 NMN */
	.nmn .n1 { width:$n1; float:left; margin-right:$space; }
	.nmn .ming { width:$rowo -$n1 -$n2 -$space*2; float:left; }
	.nmn .n2 { width:$n2; float:right; }
	/* Fixed NNM */
	.nnm .n1 { width:$n1; float:left; margin-right:$space; }
	.nnm .ming { width:$rowo -$n1 -$n2 -$space*2; float:right; }
	.nnm .n2 { width:$n2; float:left; }
}
@mixin tudingFt72cols($rowo:960px,$n1:200px,$n2:200px,$space:10px,$cols:2){
	/* [Fixed T&7 Mode] [2 Columns] */
	.rowo { width:$rowo; }
	@if($cols==-1){
		/* Fixed 2cols MN -1 */
		.mn .n1, .mn .n2 { width:auto; float:none; }
		.mn .ming { width:auto; float:none; }
		/* Fixed 2cols NM -1 */
		.nm .n1, .nm .n2 { width:auto; float:none; }
		.nm .ming { width:auto; float:none; }	
	}@else{
		/* Fixed 2cols MN */
		.mn .n1, .mn .n2 { width:$n1; }
		.mn .ming { width:$rowo -$n1 -$space; }
		/* Fixed 2cols NM */
		.nm .n1, .nm .n2 { width:$n1; }
		.nm .ming { width:$rowo -$n1 -$space; }	
	}
	/* Fixed T&7 2cols MNN */
	.mnn .n1 { width:$n1; float:right; margin-right:0; left:0; }//Extend::margin-right:-100%; left:$rowo -$n1 -$n2 -$space;
	.mnn .ming { width:$rowo -$n1 -$space; }
	.mnn .n2 { width:$rowo -$n1 -$space; float:left; }
	/* Fixed T&7 2cols NMN */
	.nmn .n1 { width:$n1; margin-right:$space; }
	.nmn .ming { width:$rowo -$n1 -$space; float:right; }
	.nmn .n2 { width:$rowo -$n1 -$space; }
	/* Fixed 2cols NNM */
	.nnm .n1 { width:$n1; margin-right:$space; }
	.nnm .ming { width:$rowo -$n1 -$space; }
	.nnm .n2 { width:$rowo -$n1 -$space; float:right; }
}
@mixin tudingFt7Set($selector:'',$rowo:960px,$n1:200px,$n2:200px,$space:10px){
	/* [Fixed T&7 Mode] [Reset] */
	#{$selector} .rowo { width:$rowo; }
	/* Fixed Reset MN */
	#{$selector} .mn .n1, #{$selector} .mn .n2 { width:$n1; }
	#{$selector} .mn .ming { width:$rowo -$n1 -$space; }
	/* Fixed Reset NM */
	#{$selector} .nm .n1, #{$selector} .nm .n2 { width:$n1; }
	#{$selector} .nm .ming { width:$rowo -$n1 -$space; }
	/* Fixed Reset T&7 MNN */
	#{$selector} .mnn .n1 { width:$n1; left:$rowo -$n1 -$n2 -$space; }//!!!$space*1
	#{$selector} .mnn .ming { width:$rowo -$n1 -$n2 -$space*2; }
	#{$selector} .mnn .n2 { width:$n2; }
	/* Fixed Reset T&7 NMN */
	#{$selector} .nmn .n1 { width:$n1; margin-right:$space; }
	#{$selector} .nmn .ming { width:$rowo -$n1 -$n2 -$space*2; }
	#{$selector} .nmn .n2 { width:$n2; }
	/* Fixed Reset NNM */
	#{$selector} .nnm .n1 { width:$n1; margin-right:$space; }
	#{$selector} .nnm .ming { width:$rowo -$n1 -$n2 -$space*2; }
	#{$selector} .nnm .n2 { width:$n2; }
}



@mixin tudingWidth($selector:''){
	//[Tuding Width]
	/* Width */
	#{$selector} .w-1-1   { width:100%;      }
	#{$selector} .w-1-2   { width:50%;       }
	#{$selector} .w-1-3   { width:33.33333%; }
	#{$selector} .w-2-3   { width:66.66666%; }
	#{$selector} .w-1-4   { width:25%;       }
	#{$selector} .w-3-4   { width:75%;       }
	#{$selector} .w-1-5   { width:20%; }
	#{$selector} .w-2-5   { width:40%; }
	#{$selector} .w-3-5   { width:60%; }
	#{$selector} .w-4-5   { width:80%; }
	#{$selector} .w-1-6   { width:16.66666%; }
	#{$selector} .w-5-6   { width:83.33333%; }
	#{$selector} .w-1-8   { width:12.5%;     }
	#{$selector} .w-3-8   { width:37.5%;     }
	#{$selector} .w-5-8   { width:62.5%;     }
	#{$selector} .w-7-8   { width:87.5%;     }
	#{$selector} .w-1-12  { width: 8.33333%; }
	#{$selector} .w-5-12  { width:41.66666%; }
	#{$selector} .w-7-12  { width:58.33333%; }
	#{$selector} .w-11-12 { width:91.66666%; }
	#{$selector} .w-1-24  { width: 4.16666%; }
	#{$selector} .w-5-24  { width:20.83333%; }
	#{$selector} .w-7-24  { width:29.16666%; }
	#{$selector} .w-11-24 { width:45.83333%; }
	#{$selector} .w-13-24 { width:54.16666%; }
	#{$selector} .w-17-24 { width:70.83333%; }
	#{$selector} .w-19-24 { width:79.16666%; }
	#{$selector} .w-23-24 { width:95.83333%; }
}



@mixin tudingX(){
	//[Tuding X (Horizontal)]
	/* X (Horizontal) */
	.xcn { clear:none; }
	.xcl { clear:left; }
	.xcr { clear:right; }
	.xcb { clear:both; }
	.xfn { float:none; }
	.xfl { float:left; }
	.xfr { float:right; }
	.xfc { margin-left:auto; margin-right:auto; }
}



@mixin clearfix(){
	.clearfix{ *zoom:1; }
	.clearfix:after { content:""; display:block; clear:both; }
}
@mixin ding(){
	.ding{ position:relative; *zoom:1; }
	.ding:after { content:""; display:block; clear:both; }
}
@mixin btnArea(){
	.btnarea{ margin:1em 0; text-align:center; *zoom:1;}
	.btnarea:after{ content:""; display:block; clear:both;}
}



@mixin tuding1col(){
	//[Tuding Outer 1 Column]
	.rowo{ width:auto !important; }
	.mn, .nm, .mnn, .nmn, .nnm { padding-left:0; padding-right:0; }
	.mn  .ming, .mn  .n1, .mn  .n2,
	.nm  .ming, .nm  .n1, .nm  .n2,
	.mnn .ming, .mnn .n1, .mnn .n2,
	.nmn .ming, .nmn .n1, .nmn .n2,
	.nnm .ming, .nnm .n1, .nnm .n2 {
		width:auto; float:none; margin-left:0; margin-right:0; left:auto; right:auto; clear:both;
	}
}



@mixin tudingWidth1col($selector:''){
	//[Tuding W-a/b 1 Column]
	#{$selector} .w-1-1,  #{$selector} .w-1-2,  #{$selector} .w-1-3,  #{$selector} .w-2-3,   #{$selector} .w-1-4,   #{$selector} .w-3-4,
	#{$selector} .w-1-5,  #{$selector} .w-2-5,  #{$selector} .w-3-5,  #{$selector} .w-4-5,
	#{$selector} .w-1-6,  #{$selector} .w-5-6,  #{$selector} .w-1-8,  #{$selector} .w-3-8,   #{$selector} .w-5-8,   #{$selector} .w-7-8,
	#{$selector} .w-1-12, #{$selector} .w-5-12, #{$selector} .w-7-12, #{$selector} .w-11-12,
	#{$selector} .w-1-24, #{$selector} .w-5-24, #{$selector} .w-7-24, #{$selector} .w-11-24, #{$selector} .w-13-24, #{$selector} .w-17-24, #{$selector} .w-19-24, #{$selector} .w-23-24 {
		width:auto; float:none;
	}
}
